<template>
  <el-dialog
    v-model="dialogVisible"
    title="选择人员"
    width="85%"
    :close="handleClose"
  >
  <el-table>
   <el-table-column prop="name" label="姓名" width="180"/>
   <el-table-column prop="idNumber" label="身份证号" width="220"/>
    <el-table-column prop="phone" label="手机号" width="180"/> 
  </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false; okCallback?.();">确认</el-button>
        <el-button @click="dialogVisible = false; cancelCallback?.();">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps(
    {
        okCallback: () => {},
        cancelCallback: () => {}
    }
);

const index = computed({
    get() {
        return props.index;
    },
    set(v) {
        emit('update:index', v);
    }
});

const emit = defineEmits(["update:visible", "update:index"]);

const dialogVisible = computed({
    get() {
        return props.visible;
    },
    set(v) {
        emit('update:visible', v);
    }
});

const handleClose = () => {
    dialogVisible.value = false;
    props.cancelCallback?.();
};
</script>
